import { Button } from "~/components/ui/button";
import { play, audio, loadMp3 } from "./readble.client";
import { useRef, useState } from "react";
import { useEventListener, useMount } from "@reactuses/core";

export default function Readble() {
  const audioRef = useRef<HTMLAudioElement>(null)
  const [loaded, setLoaded] = useState(false)
  /* useMount(()=>{
    loadMp3()
  }) */
  useEventListener('loadeddata', (e) => {
    setLoaded(true)
  }, audio)
  return <div>
    <audio ref={audioRef} controls>
      <source src="/api/mp3/b.mp3" type="audio/mpeg" />
    </audio>

    <Button onClick={() => {
      audioRef.current?.play()
    }}>
      播放
    </Button>
    <hr />
    <div>media extends api 音频</div>
    <Button onClick={() => {
      loadMp3()
    }}>
      加载
    </Button>
    <Button disabled={!loaded} onClick={() => play()}>
      播放
    </Button>
    <Button onClick={() => audio?.pause()}>
      暂停
    </Button>
  </div>
}